import React, { useCallback } from "react";
import { useDropzone } from "react-dropzone";
import { mergeProps } from "../../utils/index";
import { AddOutline } from "antd-mobile-icons";
import { Toast } from "antd-mobile";
import PropTypes from "prop-types";

const defaultProps = {
    disableUpload: false,
};

const error = new Error();

const Upload = p => {
    const props = mergeProps(defaultProps, p);
    const { children, tips, isAllFormat, accept, onRecive } = props;

    const isFile = f => {
        let fileName = f.name;
        if (fileName.indexOf(".") === -1) {
            Toast.show({
                icon: "fail",
                content: "文件格式不支持",
                duration: 1000,
            });
            return error;
        }
        if (f.size > 500 * 1024 * 1024) {
            Toast.show({
                icon: "fail",
                content: "上传文件不能超过500M,建议在100M之内",
                duration: 1000,
            });
            return error;
        }
        return null;
    };

    const onDrop = useCallback(acceptedFiles => {
        onRecive && onRecive(acceptedFiles);
    }, []);

    const validFile = useCallback(file => {
        if (isAllFormat === "all") {
            //全格式
            if (
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg" ||
                file.type === "application/pdf" ||
                file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
                file.type === "application/vnd.ms-excel" ||
                file.type === "application/msword" ||
                file.type ===
                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            ) {
                return isFile(file);
            } else {
                Toast.show({
                    icon: "fail",
                    content: "请上传要求格式的附件！",
                    duration: 1000,
                });
                return error;
            }
        } else if (isAllFormat === "images") {
            //图片格式
            if (
                file.type === "image/jpeg" ||
                file.type === "image/png" ||
                file.type === "image/jpg"
            ) {
                return isFile(file);
            } else {
                Toast.show({
                    icon: "fail",
                    content: "请上传要求格式的附件！",
                    duration: 1000,
                });
                return error;
            }
        } else {
            //文件格式
            if (
                file.type === "application/pdf" ||
                file.type === "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" ||
                file.type === "application/vnd.ms-excel" ||
                file.type === "application/msword" ||
                file.type ===
                    "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            ) {
                return isFile(file);
            } else {
                Toast.show({
                    icon: "fail",
                    content: "请上传要求格式的附件！",
                    duration: 1000,
                });
                return error;
            }
        }
    }, []);

    const { getRootProps, getInputProps } = useDropzone({
        onDrop,
        accept: {
            ...accept,
            "image/jpeg": [".jpeg", "jpg"],
            "image/png": [".png"],
            "application/pdf": [".pdf"],
            "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [".xlsx"],
            "application/vnd.ms-excel": [".xls"],
            "application/msword": [".doc"],
            "application/vnd.openxmlformats-officedocument.wordprocessingml.document": [".docx"],
        },
        validator: validFile,
    });

    return (
        <div className="upload-container" {...getRootProps()}>
            {children || (
                <div className="uploader">
                    <span className={`uploader-cell uploader-upload-button`} role="button">
                        <span className={`uploader-upload-button-icon`}>
                            <AddOutline />
                        </span>
                    </span>
                    {tips && <span className="tips">{tips}</span>}
                </div>
            )}
            {!props.disableUpload && <input aria-hidden {...getInputProps()} />}
        </div>
    );
};

Upload.propTypes = {
    accept: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)),
    children: PropTypes.element,
    disableUpload: PropTypes.bool,
    tips: PropTypes.string,
    isAllFormat: PropTypes.string,
    onRecive: PropTypes.func,
};

export default Upload;
